<template>
  <div>
    <el-dialog
      :title="this.$t('common.Add')"
      :visible.sync="Visible"
      width="400px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialogBox">
        <div class="dialogBoxItem">
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('newsManagementLang.icon')}}:
            </div>
            <div class="contant">
              <UploadImg
                :maxSize="300"
                ref="logo"
                @FileList="setFileList"
              ></UploadImg>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('newsManagementLang.News_position')}}:
            </div>
            <div class="contant">
              <el-input
                ref="name"
                @blur="handleBlur('name',$event)"
                @focus="handleFocus($event)"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.name"
              ></el-input>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('newsManagementLang.News_number')}}:
            </div>
            <div class="contant">
              <el-input-number
                controls-position="right"
                size="small" 
                ref="sort" 
                @blur="handleBlur('sort', $event)" 
                @focus="handleFocus($event)" 
                :min="1" 
                :precision="0"
                v-model="data.sort">
              </el-input-number>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('newsManagementLang.position_type')}}:
            </div>
            <div class="contant">
              <el-select
                ref="position_type"
                filterable
                @blur="handleBlur('position_type', $event)"
                @change="handleChang('position_type')"
                v-model="data.position_type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_Position"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
import UploadImg from "../../components/common/upload_Img";
export default {
  components: {UploadImg},
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      data: {
        logo: "",
        name: "",
        sort: "",
        position_type: "",
      },
      options_Position: [],
      lang_id: "",
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.lang_id=data
      this.getOptions()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      this.$get("getNewPositionType").then((res) => {
        this.options_Position = res.data;
      });
    },
    setFileList(val){
      this.data.logo=val.raw
      if(!!this.data.logo){
        this.$refs.logo.$el.getElementsByClassName('el-upload')[0].style.border='1px solid #E0E3E9'
      }
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.logo){
        this.$refs.logo.$el.getElementsByClassName('el-upload')[0].style.border='1px solid red'
        type=false
      }
      if(!this.data.name){
        this.$refs.name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.sort){
        this.$refs.sort.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.position_type&&this.data.position_type!==0) {
        this.$refs.position_type.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if (type && this.confirmTrue) {
          this.confirmTrue=false
          window.setTimeout(()=>{
            this.confirmTrue=true
          },1000);
          let params = new FormData();
          params.append("lang_id", this.lang_id);
          params.append("logo", this.data.logo);
          params.append("name", this.data.name);
          params.append("sort", this.data.sort);
          params.append("position_type", this.data.position_type);
          this.$postForm("addNewsPosition", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
              this.cancel()
            }
          });
        }
    },
    //取消
    cancel() {
      this.data = {
        logo: "",
        name: "",
        sort: "",
        position_type: "",
      };
      this.Visible = false;
      this.$refs.logo.handleRemove()
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .dialogBox .dialogBoxItem {
    flex-direction: column;
    gap: 15px;
    .dialogBoxItemRow{
      width: 100%;
    }
  }
  /deep/ .el-dialog__wrapper{
    .el-dialog{
      min-width: 500px;
    }
  }
</style>